<template>
    <div class="box" v-for="(item,index) in items "  :key="index">
        <div class="top" >
             <img src="https://img.axureshop.com/ee/00/de/ee00de2201bf478bb4a9d4f881afd706/images/首页/u55.png" class="top-img">
    
             <div class="top-left">
                <img src="https://img.axureshop.com/ee/00/de/ee00de2201bf478bb4a9d4f881afd706/images/访客审核列表-全部/u1904.png"
                   style="width:84px;z-index: 9999; height:84px">
             </div>
             <div class="top-center"  >
                <div class="name">{{item.name}}</div>
                <div class="phone">{{item.phone}}</div>
                <div class="time">{{ item.time }} </div>
             </div>
             <div class="top-right">
                <span class="rightTitle">查看详情</span>
                <a href="#">
                   <van-icon name="upgrade" color="#6CB6FF" size="20px" @click="pushclick" />
                </a>
             </div>
             <img src="https://img.axureshop.com/ee/00/de/ee00de2201bf478bb4a9d4f881afd706/images/首页/u56.png"
                class="bottom-img">
          </div>
    </div>
    </template>
    
    
    <script setup >
    import { onMounted } from "vue"
    import {loadItemApi} from "../../../api/application"
    import {ref}  from "vue"
    const items=ref([])
    onMounted(async()=>{
        let ret=await loadItemApi()
        if(ret.code===0){
            items.value=ret.data
        }
    })
    </script>
    
    
    <style lang='scss' scoped>
    .top {
       box-shadow: 0px 2px 10px rgba(102, 102, 102, 0.137254901960784);
       top: 10px;
       width: 345px;
       height: 120px;
       margin: 0 auto;
       display: flex;
       position: relative;
       margin-bottom: 20px;
    }
    
    .top-left {
       display: flex;
       justify-content: center;
       align-items: center;
    }
    
    .top-center {
       margin-top: 18px;
       z-index: 999;
       height: 84px;
       width: 151px;
    
       .name {
          font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
          font-size: 16px;
          color: white;
          font-weight: bold;
          height: 28px;
       }
    
       .time,
       .phone {
          font-size: 14px;
          color: gray;
          font-family: '微软雅黑';
          height: 28px;
    
       }
    }
    
    .top-right {
       width: 110px;
       display: flex;
       justify-content: center;
       align-items: center;
    
       .rightTitle {
          font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
          font-weight: 700;
          font-style: normal;
          font-size: 16px;
          color: #6CB6FF;
          text-align: right;
       }
    }
    
    a {
       .van-icon {
          transform: rotate(90deg);
          margin-left: 5px;
          font-weight: bold;
       }
    }
    
    .top-img {
       border-width: 0px;
       position: absolute;
       top: -10px;
       left: -10px;
       width: 200px;
       height: 65px;
    }
    .bottom-img {
       border-width: 0px;
       position: absolute;
       right: -12px;
       bottom: -12px;
       width: 135px;
       height: 70px;
    }
    </style>